<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加地址</title>
    <style type="text/css">
        #outer{
            /*border: 1px solid #ccc;*/
            /*width: 1200px;*/
            /*height: 750px;*/

            /*div居中*/
            margin:auto;
        }

        #header{
            /*border: 1px solid yellow;*/
            /*height: 150px;*/
            /*width: 1175px;*/

            margin-bottom: 2px;
        }

        #middle{
            /*border: 1px solid red;*/
            /*height: 500px;*/

            margin-bottom: 2px;
        }

        #middle_left{
            /*border: 1px solid cadetblue;*/
            /*width: 150px;*/
            /*height: 498px;*/
            float: left;
            margin-left:15px;

            margin-right: 2px;
        }

        #middle_right{

            /*border: 1px solid blue;*/
            /*height: 498px;*/
            /*width: 994px;*/
            /*1.思考整个middle可见区域的宽度798px
            2.middle_left占本身150px+边框2px
            3.margin-right外边距2px
            4.自己的边框2px*/

            /*798-150-2-2-2 = 642px;*/
            float:left;

        }

        #footer{
            /*border:1px solid darkorange;*/
            float: left;
            /*width:798px;*/
            /*1.最外层div内部可见区域的高度750px
            2.header整个高度占120px+2px
            3.margin-buttom占2px
            4.middle整个高度500px+2px
            5.middle距离footer的外边距2px
            6.footer自己本身的高度2px
            750-120-2-2-500-2-2-2; = 120;*/
            /*height: 120px;*/
        }
    </style>
    <style type="text/css">
        span {
            color: #ccc;
            font-size: 12px;
        }

        .focuss {
            color: #000;
        }

        .success {
            color: green;
        }

        .error {
            color: red;
        }
    </style>
</head>
<body>
<!--最外层div-->
<div id="outer" class="container">
    <!--定义头部head-->
    <div id="header">
        <!--引入导航begin-->
        <%@ include file="../common/header.jsp"%>
        <!--引入导航end-->
    </div>
    <!--中间的内容的div -->
    <div id="middle">
        <!--中间左边的-->
        <div id="middle_left">
            <ul class="list-group">
                <li class="list-group-item"><a href="#">个人资料</a></li>
                <li class="list-group-item"><a href="${path}/user/changepwd">密码修改</a></li>
                <li class="list-group-item"><a href="${path}/addr/list">收货地址管理</a></li>
                <li class="list-group-item"><a href="${path}/order/inquiry">订单管理</a></li>
            </ul>
        </div>
        <!--中间右边的-->
        <div id="middle_right" style="width: 87%">
            <%--内容--%>
                <div class="container" style="margin-left: 150px">
                    <div class="col-md-8 col-sm-12">
                        <ol class="breadcrumb" style="background-color: #c5c5c5">
                            <li>
                                <a href="#" class="text-success"><span class="glyphicon glyphicon-home"></span>&nbsp;&nbsp;送货地址</a>
                            </li>
                        </ol>
                        <div class="panel panel-danger">
                            <div class="panel-heading">
                                <h3 class="panel-title">添加新地址</h3>
                            </div>
                            <div class="panel-body">
                                <div class="modal-body">
                                    <!--登录的form表单-->
                                    <form action="${path}/addr/saveOrUpdate" method="post" class="form-horizontal" role="form"
                                          onsubmit="return doRe('p');">
                                        <div class="form-group">
                                            <input type="hidden" name="addressId" value="${addr.addressId}"/>
                                            <label class="col-md-2 control-label" style="margin-right: 2.9%;">所在地区:</label>

                                            <div data-toggle="distpicker">
                                                <div class="form-group col-sm-12 col-md-3">
                                                    <label class="sr-only" for="province1">province</label>
                                                    <select class="form-control" id="province1" name="province" <%--data-province="---- 选择省 ----"--%>>
                                                        <option >${addr.province}</option>
                                                    </select>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-3">
                                                    <label class="sr-only" for="city1">city</label>
                                                    <select class="form-control" id="city1" name="city">${addr.city}</select>
                                                </div>
                                                <div class="form-group col-sm-12 col-md-3">
                                                    <label class="sr-only" for="district1">area</label>
                                                    <select class="form-control" id="district1" name="area">${addr.area}</select>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback" style="clear:both">
                                            <label for="deatails" class="col-sm-2 control-label">详细地址:</label>
                                            <div class="col-sm-6">
                                <textarea class="form-control" id="deatails" name="detailAddress"
                                          placeholder="建议您如实填写详细收货地址，例如街道名称，门牌号码，楼层和房间号等信息">${addr.detailAddress}</textarea>
                                            </div>
                                            <div class="col-sm-3" style="padding-top: 10px;">
                                                <label class="alert-danger"></label>
                                            </div>
                                        </div>
                                        <div class="form-group has-feedback">
                                            <label class="col-sm-2 control-label">邮编</label>
                                            <div class="col-md-6">
                                                <input type="text" value="${addr.emailCode}" class="form-control" id="ema"
                                                       name="emailCode" placeholder="如您不清楚邮递区号，请填写111111">
                                                <span class="glyphicon glyphicon-hand-left form-control-feedback"></span>
                                            </div>
                                            <div class="col-sm-3" style="padding-top: 10px;">
                                                <label class="alert-danger"></label>
                                            </div>
                                        </div>

                                        <div class="form-group has-feedback">
                                            <label class="col-sm-2 control-label">姓名</label>
                                            <div class="col-sm-6">
                                                <input type="text" value="${addr.reciver}" class="form-control" id="reciver"
                                                       name="reciver" placeholder="收货人姓名,长度不超过25个字符">
                                                <span class="glyphicon glyphicon-user form-control-feedback"></span>
                                            </div>
                                            <div class="col-sm-3" style="padding-top: 10px;">
                                                <label class="alert-danger"></label>
                                            </div>
                                        </div>

                                        <div class="form-group has-feedback">
                                            <label class="col-sm-2 control-label">电话</label>
                                            <div class="col-sm-6">
                                                <input value="${addr.tel}" type="tel" class="form-control" id="tel" name="tel"
                                                       placeholder="合法手机格式">
                                                <span class="glyphicon glyphicon-phone form-control-feedback"></span>
                                            </div>
                                            <div class="col-sm-3" style="padding-top: 10px;">
                                                <label class="alert-danger"></label>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-offset-2 col-sm-10">
                                                <div class="checkbox">
                                                    <label>
                                                        <input type="checkbox" name="isDefault" id="isDefault"><span
                                                            class="text-success">设置默认地址</span>
                                                    </label>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-2">
                                            </div>
                                            <div class="col-sm-5">
                                                <button id="saveaddr" type="submit" class="btn btn-warning">保存</button>
                                            </div>
                                        </div>
                                    </form>
                                    <!--form结束-->
                                </div>
                            </div>
                        </div>

                        <div class="panel panel-success">
                            <div class="panel-heading">
                                <h3 class="panel-title">地址信息</h3>
                            </div>
                            <div class="panel-body">
                                <!--送货地址  begin-->
                                <div style="margin-bottom: 5px;" id="address">
                                    <table border="0" cellspacing="0" cellpadding="0" class="table table-hover">
                                        <%--<colgroup>
                                            <col class="col-man">
                                            <col class="col-area">
                                            <col class="col-address">
                                            <col class="col-postcode">
                                            <col class="col-phone">
                                            <col class="col-actions">
                                        </colgroup>--%>
                                        <thead>
                                        <tr class="thead-tbl-grade">
                                            <th>收货人</th>
                                            <th>所在地区</th>
                                            <th>详细地址</th>
                                            <th>邮编</th>
                                            <th>电话/手机</th>
                                            <th>操作</th>
                                            <th></th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <c:forEach var="i" items="${address}" varStatus="ii">
                                            <tr class="thead-tbl-address "
                                                <c:if test="${i.isDefault ne '1'}">name="chooseDefault"</c:if> >
                                                <td>${i.reciver}</td>
                                                <td> ${i.province} ${i.city} ${i.area}</td>
                                                <td>${i.detailAddress}</td>
                                                <td>${i.emailCode}</td>
                                                <td>${i.tel}</td>
                                                <td>
                                                    <a href="${path}/addr/updatePre?id=${i.addressId}">修改</a> |
                                                    <a href="${path}/addr/delete?id=${i.addressId}" class="del">删除</a>
                                                </td>
                                                <td class="thead-tbl-status"
                                                    <c:if test="${i.isDefault ne '1'}">style="display: none"</c:if> >
                                                    <c:if test="${i.isDefault eq '1'}"><span class="text-success">默认地址</span></c:if>
                                                    <c:if test="${i.isDefault ne '1'}"><a
                                                            href="${path}/addr/changeIsDefault?addressId=${i.addressId}"
                                                            class="text-success">设为默认</a></c:if>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                        </tbody>
                                    </table>
                                </div>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
    </div>

    <!--尾部-->
    <div id="footer">
        <!--引入footer begin-->
        <%@ include file="../common/footer.jsp"%>
        <!--引入footer end-->
    </div>
</div>

<%--<script src="${pageContext.request.contextPath}/dist/js/jquery.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/dist/js/distpicker.data.min.js"></script>
<script src="${pageContext.request.contextPath}/dist/js/distpicker.min.js"></script>
<script src="${pageContext.request.contextPath}/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">

    //    $('#target').distpicker();
    //
    //    $('#target').distpicker({
    //        province: '---- 所在省 ----',
    //        city: '---- 所在市 ----',
    //        district: '---- 所在区 ----'
    //    })
    /**
     * 设为默认地址
     */

    function chooseDefault() {
        var trs = document.getElementsByName("chooseDefault");
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function () {
                this.lastElementChild.style.display = "inline";
            }
            trs[i].onmouseout = function () {
                this.lastElementChild.style.display = "none";
            }
        }
    }
    chooseDefault();
    /**
     * 验证,显示错误
     */
    var dz = document.getElementById("deatails");
    var yx = document.getElementById("ema");
    var xm = document.getElementById("reciver");
    var phone = document.getElementById("tel");

    function doRe(param) {
        var flag = true;
        //验证详细地址
        checkData(dz, "*请输入地址,5-120个字符", function (val) {
            //定义一个邮箱的正则表达式对象
            var reg = /^.{5,120}$/;

            if (reg.test(val)) {
                return true;
            } else {
                flag = false;
                return false;
            }
        }, param);

        //验证邮箱
        checkData(yx, "*邮编格式不正确", function (val) {
            //定义一个邮编的正则表达式对象
            var reg = /^[1-9]\d{5}$/;

            if (reg.test(val)) {
                return true;
            } else {
                flag = false;
                return false;
            }
        }, param);

        //验证姓名
        checkData(xm, "*姓名2到25个字符", function (val) {
            var reg = /^.{2,25}$/;
            if (reg.test(val)) {
                return true;
            } else {
                flag = false;
                return false;
            }
        }, param);

        //验证号码
        checkData(phone, "*电话号码格式不正确", function (val) {
            //定义一个邮箱的正则表达式对象
            var reg = /^1[3|5|7|8]\d{9}$/;

            if (reg.test(val)) {
                return true;
            } else {
                flag = false;
                return false;
            }
        }, param);
        return flag;
    }

    //定义一个函数,用来检测数据
    //obj代表各个需要验证的输入框
    //info代表span错误时需要显示的内容.
    //fun - 闭包函数
    function checkData(obj, info, fun, param) {
        var span = obj.parentNode.nextElementSibling.children[0];
        //各个文本输入框添加onfocus事件
        obj.onfocus = function () {
            span.className = "focuss";
        }
        //添加需要验证的文本输入框的onblur事件
        obj.onblur = function () {//为了修改span样式
            //先获取文本输入框中的内容
            var text = this.value;
            //每个验证的regex是不一样的.
            if (!fun(text)) {
                //不成功..
                span.innerHTML = info;
                span.className = "error";
            } else {
                //成功...
                span.innerHTML = "√";
                span.className = "success";
            }
        }
        //判断doRegister是否为按钮触发的
        if (param == 'p') {
            obj.onblur();
        }
    }
</script>

<script type="text/javascript">
    function switchSysBar() {
        var ssrc = document.getElementById("frmTitle").style.display;
        if (ssrc == "none") {
            document.getElementById("frmTitle").style.display = "";
        }
        else {
            document.getElementById("frmTitle").style.display = "none"
        }
    }
</script>


</body>
</html>

